<template>

  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="userDo-search">
      <el-form-item label="试卷分类名称 ：">
        <el-input
            size="small"
            v-model="formInline.pageName"
            placeholder="输入试卷分类名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="分类层级：">
        <el-input
            size="small"
            v-model="formInline.level"
            placeholder="输入分类层级"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="search"
        >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
        size="small"
        :data="listData"
        highlight-current-row
        v-loading="loading"
        border
        element-loading-text="拼命加载中"
        style="width: 60%"
    >
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="序号" width="60">
      </el-table-column>
      <el-table-column sortable prop="name" label="试卷分类名称" width="100">
      </el-table-column>
      <el-table-column sortable prop="paper_class" label="分类层级" width="80">
      </el-table-column>
      <el-table-column sortable prop="difficulty" label="排序值" width="60">
      </el-table-column>
      <el-table-column sortable prop="create_man" label="创建人" width="60">
      </el-table-column>
      <el-table-column sortable prop="update_time" label="最新修改时间" width="200" >
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" @click="detailEdit(scope.$index, scope.row)">详情</el-button>
          <el-button size="mini" type="danger"  @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="20" style="margin-left:200px;margin-top:16px">
    </el-pagination>



    <!-- 编辑界面 -->
    <el-dialog
        :title="title"
        :visible.sync="editFormVisible"
        width="30%"
        @click="closeDialog"
    >
      <el-form
          label-width="120px"
          :model="editForm"

          ref="editForm"
      >
        <el-form-item label="试卷分类名称" prop="name">
          <el-input
              size="small"
              v-model="editForm.name"
              auto-complete="off"
              placeholder="请输入试卷分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类层级" prop="level">
          <el-input
              size="small"
              v-model="editForm.level"
              auto-complete="off"
              placeholder="请输入分类层级"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="value">
          <el-input
              size="small"
              v-model="editForm.value"
              auto-complete="off"
              placeholder="请输入排序值"
          ></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
            size="small"
            type="primary"
            :loading="loading"
            class="title"
            @click="submitForm('editForm')"
        >保存</el-button
        >
      </div>
    </el-dialog>


    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "index",

  data() {
    return {
      loading: false,
      editFormVisible: false, //控制编辑页面显示与隐藏
      title:"",
      currentPage4: null,
      formInline: {
        //设置加载初始页
        page: 1,
        //设置加载初始条数
        limit: 5,
        pageName:"",
        level:""
      },
      listData: [
        // {id:type1,
        //   name:"语文试卷",
        //   level:"一级",
        //   value:"type1",
        //   create:"李华",
        //   newestTime:"2021-05-01 08:58:05"
        // },

      ], //用户数据
      //删除id
      deleteId:null,
      editForm: {
        id: null,
        name: "",
        level: "",
        value:""

      },



    }

  },
    created() {
     this.getdata();
   },
  methods: {
    getdata(){
      this.$axios.post('http://localhost:8080/testPaper/findAll').
      then(res=>{

        console.log(res.data.data)
        this.listData = res.data.data
      }).catch()

    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    search() {
      console.log(this.formInline);
      //this.getdata(this.formInline);
      // //展示页面在1第一页
      // this.formInline.page = type1;
      // //展示分页下标在第一页
      // this.pageparm.currentPage = type1;
    },
    handleEdit: function (index, row) {
      //editFormVisble 表示某个弹窗的隐藏或者显示
      this.editFormVisible = true;

      this.title = "修改";
      this.editForm.id = row.id;
      this.editForm.name = row.name;
      this.editForm.value = row.value;
      this.editForm.level = row.level;
      console.log(this.editForm);

    },
    //关闭弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
    submitForm(editData) {
      this.$message('保存成功');
      this.editFormVisible = false;
    },
    deleteUser(index, row) {
      console.log(row.id)
        this.deleteId = row.id
        this.$axios.post('http://localhost:8080/testPaper/deleteById/'+this.deleteId).then(
            this.getdata()
        ).catch()

        this.$message('删除成功');


    },
    detailEdit(index, row){
      this.$axios.post('http://localhost:8080/testPaper/findById/'+row.id).then(
          res=>{
            console.log(res.data.data)
          }
      ).catch()
      console.log(row);
      this.$router.push('/detail')
    }
  }

};
</script>

<style scoped></style>

